<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Drawing an animated vector bar graph.</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas;
	var stage;
	var barPadding = 7;
	var barHeight;
	var maxValue = 50;
	var count;
	var barValues = [];
	var bars = [];

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// generate some random data (between 4 and 10, the |0 floors (for positive numbers))
		var numBars = Math.random()*6+4|0;
		var max = 0;
		for (var i=0; i<numBars; i++) {
			var val = Math.random()*maxValue+1|0;
			if (val > max) { max = val; }
			barValues.push(val);
		}

		// calculate the bar width and height based on number of bars and width of canvas:
		var barWidth = (canvas.width-150-(numBars-1)*barPadding)/numBars;
		barHeight = canvas.height-150;

		// create a shape to draw the background into:
		var bg = new createjs.Shape();
		stage.addChild(bg);

		// draw the "shelf" at the bottom of the graph:
		// note how the drawing instructions can be chained together.
		bg.graphics.beginStroke("#444")
			.moveTo(40, canvas.height-69.5)
			.lineTo(canvas.width-70, canvas.height-69.5)
			.endStroke()
			.beginFill("#222")
			.moveTo(canvas.width-70, canvas.height-70)
			.lineTo(canvas.width-60, canvas.height-80)
			.lineTo(50, canvas.height-80)
			.lineTo(40, canvas.height-70)
			.closePath();

		// draw the horizontal lines in the background:
		for (i=0; i<9; i++) {
			bg.graphics.beginStroke(i%2 ? "#333" : "#444")
				.moveTo(50,(canvas.height-80-i/8*barHeight|0)+0.5)
				.lineTo(canvas.width-60,(canvas.height-80-i/8*barHeight|0)+0.5);
		}

		// add the graph title:
		label = new createjs.Text("Bar Graph Example", "bold 30px Arial", "#FFF");
		label.textAlign = "center";
		label.x = canvas.width/2;
		label.y = 20;
		stage.addChild(label);

		// draw the bars:
		for (i=0; i<numBars; i++) {
			// each bar is assembled in its own Container, to make them easier to work with:
			var bar = new createjs.Container();

			// this will determine the color of each bar, save as a property of the bar for use in drawBar:
			var hue = bar.hue = i/numBars*360;

			// draw the front panel of the bar, this will be scaled to the right size in drawBar:
			var front = new createjs.Shape();
			front.graphics.beginLinearGradientFill(
					[createjs.Graphics.getHSL(hue,100,60,0.9),
					createjs.Graphics.getHSL(hue,100,20,0.75)],
					[0,1],
					0,
					-100,
					barWidth,0).drawRect(0,-100,barWidth+1,
					100);

			// draw the top of the bar, this will be positioned vertically in drawBar:
			var top = new createjs.Shape();
			top.graphics.beginFill(createjs.Graphics.getHSL(hue,100,70,0.9))
				.moveTo(10,-10)
				.lineTo(10+barWidth,-10)
				.lineTo(barWidth,0)
				.lineTo(0,0)
				.closePath();

			// if this has the max value, we can draw the star into the top:
			if (barValues[i] == max) {
				top.graphics.beginFill("rgba(0,0,0,0.45)").drawPolyStar(barWidth/2, 31, 7, 5, 0.6, -90).closePath();
			}

			// prepare the side of the bar, this will be drawn dynamically in drawBar:
			var right = new createjs.Shape();
			right.x = barWidth-0.5;

			// create the label at the bottom of the bar:
			var label = new createjs.Text("Label "+i, "16px Arial", "#FFF");
			label.textAlign = "center";
			label.x = barWidth/2;
			label.maxWidth = barWidth;
			label.y = 12;
			label.alpha = 0.5;

			// draw the tab that is placed under the label:
			var tab = new createjs.Shape();
			tab.graphics.beginFill(createjs.Graphics.getHSL(hue,100,20))
				.drawRoundRectComplex(0,1,barWidth,38,0,0,10,10);

			// create the value label that will be populated and positioned by drawBar:
			var value = new createjs.Text("foo","bold 14px Arial","#000");
			value.textAlign = "center";
			value.x = barWidth/2;
			value.alpha = 0.45;

			// add all of the elements to the bar Container:
			bar.addChild(right,front,top,value,tab,label);

			// position the bar, and add it to the stage:
			bar.x = i*(barWidth+barPadding)+60;
			bar.y = canvas.height-70;

			stage.addChild(bar);
			bars.push(bar);

			// draw the bar with an initial value of 0:
			drawBar(bar, 0);
		}

		// set up the count for animation based on the number of bars:
		count = numBars*10;

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.useRAF = true;
		// if we use requestAnimationFrame, we should use a framerate that is a factor of 60:
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// if we are on the last frame of animation then remove the tick listener:
		if (--count == 1){ createjs.Ticker.removeEventListener("tick", tick); }

		// animate the bars in one at a time:
		var c = bars.length*10-count;
		var index = c/10|0;
		var bar = bars[index];
		drawBar(bar, (c%10+1)/10*barValues[index]);

		// update the stage:
		stage.update(event);
	}

	function drawBar(bar, value) {
		// calculate bar height:
		var h = value/maxValue*barHeight;

		// update the value label:
		var val = bar.getChildAt(3);
		val.text = value|0;
		val.visible = (h>28);
		val.y = -h+10;

		// scale the front panel, and position the top:
		bar.getChildAt(1).scaleY = h/100;
		bar.getChildAt(2).y = -h+0.5; // the 0.5 eliminates gaps from numerical precision issues.

		// redraw the side bar (we can't just scale it because of the angles):
		var right = bar.getChildAt(0);
		right.graphics.clear()
			.beginFill(createjs.Graphics.getHSL(bar.hue,60,15,0.7))
			.moveTo(0,0)
			.lineTo(0,-h)
			.lineTo(10,-h-10)
			.lineTo(10,-10)
			.closePath();
	}


	</script>
</head>
	
<body onload="init();">
	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Bar Graph Example</h1>
	    <p>Reload for new random data. Example of using the <strong>Graphics</strong>, <strong>Shape</strong>, <strong>Text</strong> and <strong>Container</strong> classes to draw a simple vector bar graph.
	    </p>
	</header>

    <div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>

</body>
</html>